            body{
				  box-sizing:border-box;
                  background-color:black;
                  margin: 0px;
			}

			.container{
                width: 100vw;
                height: 100vh;
                  perspective: 1000px;
                  display: flex;
                  align-items: center;
				  justify-content: center;
				  opacity: 0;
				  position: relative;
				  transition: opacity ease 1s;
			} 
			.container.show{
				opacity: 1;
			}
			.cube.lg{
				  width:450px;
				  height:450px;
			   	  transform-style: preserve-3d;    
				  animation:lgRotate 8s linear infinite;
                  
            }
            .cube.sm{
                  position: absolute;
                  top: calc(50% - 100px);
                  left: calc(50% - 100px);
                  transform-style: preserve-3d;    
                  animation:smRotate 6s linear infinite;
                  width: 200px;
                  height: 200px;
            }
			.cube div{
				width:100%;
				height:100%;
				position:absolute;
				text-align:center;
			
				  
            }
            .cube div img{
                display: block;
                width: 100%;
                height: 100%;
                object-fit: cover;
                opacity: .8;
            }
			@keyframes lgRotate {
			  from {
				transform:  rotateY(360deg);
			  }
			  to {
				transform:  rotateY(0deg);
			  }
            }
                        .lg.ready img{
							opacity: .05;
							transition: opacity .8s ease;
						}
						.lg.frozen img{
							opacity: .8;
						}
						.lg.ready>*{
							transition: transform ease .8s;
						}
					  .lg.ready .top{
						transform:rotateX(90deg) translateZ(225px);
					  }
					  .lg.ready .bottom{
						transform:rotateX(90deg) translateZ(-225px);
					
					  }
					  .lg.ready .right{
						transform:rotateY(90deg) translateZ(225px);
						
					  }
					  .lg.ready .left{
						transform:rotateY(90deg) translateZ(-225px);
						
					  }
					  .lg.ready .font{
						transform:translateZ(225px);
					  }
					  .lg.ready .back{
						transform:translateZ(-225px);
					  }
					  
					  .lg.frozen .top{
						transform:rotateX(90deg) translateZ(320px);
					  }
					  .lg.frozen .bottom{
						transform:rotateX(90deg) translateZ(-320px);
					
					  }
					  .lg.frozen .right{
						transform:rotateY(90deg) translateZ(320px);
						
					  }
					  .lg.frozen .left{
						transform:rotateY(90deg) translateZ(-320px);
						
					  }
					  .lg.frozen .font{
						transform:translateZ(320px);
					  }
					  .lg.frozen .back{
						transform:translateZ(-320px);
                      }
                      
                      @keyframes smRotate {
                        from {
                          transform:  rotateY(360deg);
                        }
                        to {
                          transform:  rotateY(0deg);
                        }
                      }
                      .sm .top{
						transform:rotateX(90deg) translateZ(100px);
					  }
					  .sm .bottom{
						transform:rotateX(90deg) translateZ(-100px);
					
					  }
					  .sm .right{
						transform:rotateY(90deg) translateZ(100px);
						
					  }
					  .sm .left{
						transform:rotateY(90deg) translateZ(-100px);
						
					  }
					  .sm .font{
						transform:translateZ(100px);
					  }
					  .sm .back{
						transform:translateZ(-100px);
					  }